<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="css/font.css"/>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/ie7.css"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie8.css"/>
    <![endif]-->
    <link rel="stylesheet" href="css/sequencejs-theme.modern-slide-in.css"/>
    <link rel="stylesheet" href="css/jquery.sidr.dark.css"/>
    <link rel="stylesheet" href="css/responsive.css"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/twitter.min.js"></script>
    <script type="text/javascript" src="js/jquery.sequence-min.js"></script>
    <script type="text/javascript" src="js/jquery.sidr.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="wrapper">
    <header id="header">
        <span class="top-line"></span>
        <div class="container_12">
            <div class="top-login-reg">
                <a href="#">Login</a>
                <a href="#">Register</a>
            </div>
            <div class="clear"></div>
            <div class="head-menu clearfix">
                <h1 id="logo">
                    <a href="#">
                        <img src="images/logo.png" alt="$SITE_NAME"/>
                    </a>
                </h1>
                <nav class="main-nav">
                    <ul id="main-menu" class="nav nav-horizontal">
                        <li class="has-sub active">
                            <a href="#">Home</a>
                            <ul class="sub-menu">
                              <li><a href="#">Home page version 1</a></li>
                              <li><a href="#">Home page version 2</a></li>
                              <li><a href="#">Home page version 3</a></li>
                            </ul>
                        </li>
                        <li class="has-sub">
                            <a href="#">About</a>
                            <ul class="sub-menu">
                              <li><a href="#">Team</a></li>
                              <li><a href="#">Company</a></li>
                              <li><a href="#">Maps</a></li>
                            </ul>
                        </li>
                        <li class="has-sub">
                            <a href="#">Service</a>
                            <ul class="sub-menu">
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">WordPress Development</a></li>
                                <li><a href="#">Graphic Design</a></li>
                                <li><a href="#">Custom Development</a></li>
                                <li><a href="#">APIs Integration</a></li>
                                <li><a href="#">Mobile Apps Development</a></li>
                                <li><a href="#">Consulting</a></li>
                                <li><a href="#">Promotion</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact us</a></li>
                    </ul>
                    <a id="btn-toogle-menu" class="btn-toogle-menu" href="#alternate-menu">
                        <span class="line-bar"></span>
                        <span class="line-bar"></span>
                        <span class="line-bar"></span>
                    </a>
                    <div id="right-menu">
                        <ul class="alternate-menu">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Service</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="top-slide">
            <div class="sequence-theme">
                <div id="sequence">
                    <ul class="sequence-canvas">
                        <li class="animate-in slide-item">
                            <div class="slide-image">
                                <div class="ver-block">
                                	<span class="ver_hold"></span>
                                	<span class="container">
                                        <img src="images/ex/th-slide1.png" alt="$TITLE"/>
                                    </span>
                                </div>
                            </div>
                            <h2 class="slide-title">Hand-made websites from great guys</h2>
                            <div class="slide-desc-btn">
                                <p class="slide-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto, atque beatae consectetur ducimus earum eligendi ipsam magni molestiae possimus quod repellat saepe vero voluptate.</p>
                                <div class="slide-btn">
                                    <a href="#" class="link-btn btn-dark">Learn more</a>
                                    <a href="#" class="link-btn btn-light">Download</a>
                                </div>
                            </div>
                        </li><!--end: slide-item -->
                        <li class="slide-item">
                            <div class="slide-image">
                                <div class="ver-block">
                                	<span class="ver_hold"></span>
                                	<span class="container">
                                        <img src="images/ex/th-slide2.png" alt="$TITLE"/>
                                    </span>
                                </div>
                            </div>
                            <h2 class="slide-title">2 Hand-made websites from great guys</h2>
                            <div class="slide-desc-btn">
                                <p class="slide-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto, atque beatae consectetur ducimus earum eligendi ipsam magni molestiae possimus quod repellat saepe vero voluptate.</p>
                                <div class="slide-btn">
                                    <a href="#" class="link-btn btn-dark">Learn more</a>
                                    <a href="#" class="link-btn btn-light">Download</a>
                                </div>
                            </div>
                        </li><!--end: slide-item -->
                        <li class="slide-item">
                            <div class="slide-image">
                                <div class="ver-block">
                                	<span class="ver_hold"></span>
                                	<span class="container">
                                        <img src="images/ex/th-slide1.png" alt="$TITLE"/>
                                    </span>
                                </div>
                            </div>
                            <h2 class="slide-title">3 Hand-made websites from great guys</h2>
                            <div class="slide-desc-btn">
                                <p class="slide-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto, atque beatae consectetur ducimus earum eligendi ipsam magni molestiae possimus quod repellat saepe vero voluptate.</p>
                                <div class="slide-btn">
                                    <a href="#" class="link-btn btn-dark">Learn more</a>
                                    <a href="#" class="link-btn btn-light">Download</a>
                                </div>
                            </div>
                        </li><!--end: slide-item -->
                        <li class="slide-item">
                            <div class="slide-image">
                                <div class="ver-block">
                                	<span class="ver_hold"></span>
                                	<span class="container">
                                        <img src="images/ex/th-slide2.png" alt="$TITLE"/>
                                    </span>
                                </div>
                            </div>
                            <h2 class="slide-title">4 Hand-made websites from great guys</h2>
                            <div class="slide-desc-btn">
                                <p class="slide-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto, atque beatae consectetur ducimus earum eligendi ipsam magni molestiae possimus quod repellat saepe vero voluptate.</p>
                                <div class="slide-btn">
                                    <a href="#" class="link-btn btn-dark">Learn more</a>
                                    <a href="#" class="link-btn btn-light">Download</a>
                                </div>
                            </div>
                        </li><!--end: slide-item -->
                    </ul>
                    <div class="wrap-pagination">
                        <ul class="sequence-pagination container_12">
                            <li class="grid_3">Graphic Design</li>
                            <li class="grid_3">Web Design</li>
                            <li class="grid_3">Programming</li>
                            <li class="grid_3">Consulting</li>
                            <li class="clear"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><!--end: .top-slide -->
    </header><!--end: #header -->
    <div class="service container_12">
        <div class="grid_3 service-item">
            <h3 class="title rs">
                <i class="icon iGPlus"></i>
                <a href="#">Project Management</a>
            </h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque doloremque et laudantium provident sed!</p>
            <a href="#" class="read-more">Learn More</a>
        </div><!--end: .service-item -->
        <div class="grid_3 service-item">
            <h3 class="title rs">
                <i class="icon iPromote"></i>
                <a href="#">Promotion</a>
            </h3>
            <p class="description">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curab ur ullamcorper ultricies nisi. Nam eget andetto dui.</p>
            <a href="#" class="read-more">Learn More</a>
        </div><!--end: .service-item -->
        <div class="clear clear-2col"></div>
        <div class="grid_3 service-item">
            <h3 class="title rs">
                <i class="icon iNote"></i>
                <a href="#">Mobile Development</a>
            </h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque doloremque et laudantium provident sed!</p>
            <a href="#" class="read-more">Learn More</a>
        </div><!--end: .service-item -->
        <div class="grid_3 service-item">
            <h3 class="title rs">
                <i class="icon iHome"></i>
                <a href="#">Marketing</a>
            </h3>
            <p class="description">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curab ur ullamcorper ultricies nisi. Nam eget andetto dui.</p>
            <a href="#" class="read-more">Learn More</a>
        </div><!--end: .service-item -->
        <div class="clear"></div>
    </div><!--end: service -->
    <div class="featured-info">
        <div class="container_12 lst-lastest-work">
            <div class="grid_3 project-lastest">
                <h2 class="common-title">lastest work</h2>
                <p class="rs description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.</p>
                <a class="gray-link" href="#">View All</a>
            </div>
            <div class="grid_3 project-media">
                <div class="container-project">
                    <img src="images/ex/th-210x150-2.jpg" class="thumb" alt="$PROJECT_NAME"/>
                    <div class="wrap-information">
                        <div class="information">
                            <h4 class="project-title"><a class="fc-white" href="#">Lorem ipsum</a></h4>
                            <p class="rs description">Phagirsellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid_3 project-media">
                <div class="container-project">
                    <img src="images/ex/th-210x150-3.jpg" class="thumb" alt="$PROJECT_NAME"/>
                    <div class="wrap-information">
                        <div class="information">
                            <h4 class="project-title"><a class="fc-white" href="#">Lorem ipsum</a></h4>
                            <p class="rs description">Phagirsellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid_3 project-media">
                <div class="container-project">
                    <img src="images/ex/th-210x150-1.jpg" class="thumb" alt="$PROJECT_NAME"/>
                    <div class="wrap-information">
                        <div class="information">
                            <h4 class="project-title"><a class="fc-white" href="#">Lorem ipsum</a></h4>
                            <p class="rs description">Phagirsellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div><!--end: .lst-lastest-work -->
        <div class="container_12 our-info">
            <div class="grid_4 about-item">
                <h2 class="common-title">About Us</h2>
                <p class="rs description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <a class="gray-link" href="#">Learn More</a>
            </div>
            <div class="grid_4 about-service">
                <h2 class="common-title">Industries We Serve</h2>
                <div class="clearfix">
                    <div class="lst-our-service">
                        <p class="rs service-item">
                            <a href="#">B2B</a>
                        </p>
                        <p class="rs service-item">
                            <a href="#">Beauty & Fashion</a>
                        </p>
                        <p class="rs service-item">
                            <a href="#">Finance</a>
                        </p>
                        <p class="rs service-item">
                            <a href="#">Food & Beverage</a>
                        </p>
                        <p class="rs service-item">
                            <a href="#">Legal</a>
                        </p>
                    </div><!--end: .lst-our-service -->
                    <div class="lst-our-service">
                        <p class="rs service-item">
                            <a href="#">B2B</a>
                        </p>
                        <p class="rs service-item">
                            <a href="#">Lorem ipsum.</a>
                        </p>
                        <p class="rs service-item">
                            <a href="#">Media</a>
                        </p>
                        <p class="rs service-item">
                            <a href="#">Dog Trainning</a>
                        </p>
                        <p class="rs service-item">
                            <a href="#">Lorem ipsum.</a>
                        </p>
                    </div><!--end: .lst-our-service -->
                </div>
            </div>
            <div id="sys_about_testimonial" class="grid_4 about-testimonial">
                <h2 class="common-title">Testimonials</h2>
                <div class="wrap-lst-testimonial">
                    <div id="sys_present_lst" class="present-lst">
                        <div class="testimonial-content">
                            <div class="mid-testimonial-content">
                                <span class="ver_hold"></span>
                               	<span class="container ta-l">1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum libero perferendis.</span>
                            </div>
                        </div>
                        <div class="testimonial-content active">
                            <div class="mid-testimonial-content">
                                <span class="ver_hold"></span>
                               	<span class="container ta-l">2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum libero perferendis.</span>
                            </div>
                        </div>
                        <div class="testimonial-content">
                            <div class="mid-testimonial-content">
                                <span class="ver_hold"></span>
                               	<span class="container ta-l">3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum libero perferendis.</span>
                            </div>
                        </div>
                        <div class="testimonial-content">
                            <div class="mid-testimonial-content">
                                <span class="ver_hold"></span>
                               	<span class="container ta-l">4Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum libero perferendis.</span>
                            </div>
                        </div>
                        <div class="testimonial-content">
                            <div class="mid-testimonial-content">
                                <span class="ver_hold"></span>
                               	<span class="container ta-l">5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum libero perferendis.</span>
                            </div>
                        </div>
                    </div>
                    <i class="icon iPickDown"></i>
                </div>
                <div class="wrap-indicators clearfix">
                    <div id="sys_indicators" class="indicators">
                        <i class="dot-gray"></i>
                        <i class="dot-gray active"></i>
                        <i class="dot-gray"></i>
                        <i class="dot-gray"></i>
                        <i class="dot-gray"></i>
                    </div>
                    <div id="sys_lst_people_name" class="lst-people-name">
                        <div class="people-name">John Resig</div>
                        <div class="people-name active">Paul Irish</div>
                        <div class="people-name">John S. Doe</div>
                        <div class="people-name">Hakim El Hattab</div>
                        <div class="people-name">Greg Shackles</div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div><!--end: .featured-info -->
    <div class="recent-posts">
        <div class="container_12 lst-recent-posts">
            <div class="grid_3 article-lastest">
                <h2 class="common-title">Recent Posts</h2>
                <p class="rs description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.</p>
                <a class="gray-link" href="#">Go to Blog</a>
            </div>
            <div class="grid_3 article-item">
                <div class="wrap-thumb-article">
                    <img src="images/ex/th-210x100-2.jpg" class="thumb" alt="$PROJECT_NAME"/>
                    <div class="wrap-icon-action">
                        <i class="icon iPlus"></i>
                    </div>
                </div>
                <h3 class="rs acticle-title"><a href="#">Lorem ipsum</a></h3>
                <div class="acticle-time">posted on <span class="fc-blue">April 1, 2013</span></div>
                <p class="rs acticle-description">Lorem ipsum dolor sit amet, tetuer adipiscing elit. Enean commodo ligula eget.</p>
            </div>
            <div class="grid_3 article-item">
                <div class="wrap-thumb-article">
                    <img src="images/ex/th-210x100-1.jpg" class="thumb" alt="$PROJECT_NAME"/>
                    <div class="wrap-icon-action">
                        <i class="icon iPlus"></i>
                    </div>
                </div>
                <h3 class="rs acticle-title"><a href="#">Lorem ipsum</a></h3>
                <div class="acticle-time">posted on <span class="fc-blue">April 1, 2013</span></div>
                <p class="rs acticle-description">Lorem ipsum dolor sit amet, tetuer adipiscing elit. Enean commodo ligula eget.</p>
            </div>
            <div class="grid_3 article-item">
                <div class="wrap-thumb-article">
                    <img src="images/ex/th-210x100-2.jpg" class="thumb" alt="$PROJECT_NAME"/>
                    <div class="wrap-icon-action">
                        <i class="icon iPlus"></i>
                    </div>
                </div>
                <h3 class="rs acticle-title"><a href="#">Lorem ipsum</a></h3>
                <div class="acticle-time">posted on <span class="fc-blue">April 1, 2013</span></div>
                <p class="rs acticle-description">Lorem ipsum dolor sit amet, tetuer adipiscing elit. Enean commodo ligula eget.</p>
            </div>
            <div class="clear"></div>
        </div><!--end: .lst-recent-posts -->
    </div><!--end: .recent-posts -->
    <div class="client-we-work">
        <div class="client-info">
            <div class="container_12 clearfix">
                <div class="grid_12">
                    <h2 class="common-title big">Clients we work with</h2>
                    <p class="rs description">Nulla consectetur lacinia sollicitudin. Phasellus pharetra, ipsum vitae mollis tristique, dui urna interdum lacus, vitae aliquam risus ipsum a felis. Nunc tempor viverra viverra. In at enim purus, id sodales arcu.</p>
                    <div class="lst-logo-client clearfix">
                        <a href="#"><i class="client-logo graphicriver"></i></a>
                        <a href="#"><i class="client-logo photodune"></i></a>
                        <div class="clear clear-2col"></div>
                        <a href="#"><i class="client-logo codecanyon"></i></a>
                        <a href="#"><i class="client-logo themeforest"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div><!--end: .client-we-work -->
    <footer id="footer">
        <div class="info-line">
            <div class="container_12">
                <div class="grid_9">
                    <h2 class="common-title">Cras iaculis lacus vel enim ornare dapibus venenatis nunc semper</h2>
                    <p class="rs description">Cras quis enim ipsum. Nam convallis semper orci nec elementum. Donec lorem ante, sollicitudin eu feugiat vitae, egestas et risus. Integer quis nisi eu enim tincidunt rutrum.</p>
                </div>
                <div class="grid_3 ta-r">
                    <a class="btn-blue" href="#">Learn more</a>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="container_12 main-footer">
            <div class="grid_3 contact-info">
                <h3 class="common-title">Contact Info</h3>
                <p class="rs img-map">
                    <img src="images/ex/th-map.jpg" alt="map"/>
                </p>
                <p class="rs contact-item">
                    <span class="lbl">T.:</span>
                    <span class="val">+1 (555) 555 - 55 - 55</span>
                </p>
                <p class="rs contact-item">
                    <span class="lbl">E.:</span>
                    <a href="mailto:sales@bestwebsoft.com" class="val">sales@bestwebsoft.com</a>
                </p>
            </div><!--end: .contact-info -->
            <div class="recent-tweets">
                <h3 class="common-title">recent tweets</h3>
                <div class="lst-tweets" id="sys_lst_tweets">
                    <p class="rs ta-c fc-white">
                        loading Twitter <br />
                        <img src="images/spinner.gif" alt="loading"/>
                    </p>
                    <!--<div class="tweet-item">
                        <p class="rs tweet-mind">Analyst is a business PSD template. Created by #bestwebsoft - hand-made websites from great guys <a href="#">http://t.co/HXvWw</a></p>
                        <p class="rs timestamp">posted 5 minutes ago</p>
                        <i class="icon iTwitter"></i>
                    </div>-->
                </div>
            </div><!--end: .recent-tweets -->
            <div class="clear clear-2col"></div>
            <div class="email-newsletter">
                <h3 class="common-title">Newsletter Signup</h3>
                <p class="rs description">Nam aliquet, velit quis consequat interdum, odio dolor elementum.</p>
                <form action="#">
                    <div class="form-email">
                        <label class="lbl" for="txt-email">
                            <input id="txt-email" type="text" class="txt-input" placeholder="Email Address"/>
                        </label>
                        <button class="btn-blue btn-submit smaller" type="submit">Submit</button>
                    </div>
                </form>
            </div><!--end: .email-newsletter -->
            <div class="foot-menu">
                <h3 class="common-title">Menu</h3>
                <ul class="rs">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div><!--end: .foot-menu -->
            <div class="clear"></div>
            <div class="lst-btn-social clearfix">
                <div class="grid_4"><a class="btn-invisible btn-twitter" href="#">Follow Us on Twitter</a></div>
                <div class="grid_4"><a class="btn-invisible btn-fb" href="#">Follow Us on Facebook</a></div>
                <div class="grid_4"><a class="btn-invisible btn-linkedin" href="#">Follow Us on LinkedIn</a></div>
            </div>
            <p class="rs copyright"><span class="lbl">Designed with love by</span> <a href="#" class="val">BestWebSoft.</a></p>
        </div>
    </footer><!--end: #footer -->

</div>
</body>
</html>